<template>
  <div class="box">
    <div class="head-search">
      <search @onSubmit="onSearch">
        <el-form-item>
          <el-input placeholder="请输入内容" clearable v-model="searchData.val" size="small" class="input-with-select">
            <el-select v-model="select" clearable slot="prepend" placeholder="请选择">
              <el-option v-for="(item, index) in searchList"
                         :key="index"
                         :label="item.dictLabel"
                         :value="item.dictValue"></el-option>
<!--              <el-option label="登记人" value="2"></el-option>-->
            </el-select>
          </el-input>
        </el-form-item>
      </search>
    </div>
    <section class="fun-btn">
      <el-button class="btn" icon="el-icon-plus" type="primary" size="mini" @click="handleAddEdit('add')">登记</el-button>
      <el-button :loading="downloadLoading" icon="el-icon-download" class="btn" type="primary" size="mini" @click="handleDownload">报表下载
      </el-button>
      <el-button class="btn" icon="el-icon-setting" type="primary" size="mini" @click="handleSet">设置</el-button>
      <el-button @click="handleDrawer" icon="el-icon-document" class="btn" type="primary" size="mini">报警记录</el-button>
    </section>

    <section class="list-box">
      <el-table
        :data="tableData"
        border
        v-loading="tableLoading"
        height="calc(100vh - 232px)"
        class="table">
        <el-table-column
          fixed="left"
          align="center"
          type="selection"
          width="60">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="dates"
          label="日期"
          :formatter="formatDate"
          width="180">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="temperatures"
          label="温度"
          width="180">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="humiditys"
          label="湿度"
          width="150">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="userRegistrant"
          label="登记人"
          width="150">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="remarks"
          label="描述"
          width="300">
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" type="text" @click="handleAddEdit('edit', scope.row)">编辑</el-button>
            <el-button icon="el-icon-delete" @click="handleDel(scope.row)" type="text" style="color: #F56C6C">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="Number(page.total)>0"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(page.total)">
      </el-pagination>
    </section>

    <el-dialog :title="dialogTitle"
               width="500"
               top="5vh"
               :destroy-on-close="true"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="dialogRegister">
      <div class="import-content">
        <add-register :type="isType"
                      :rowData="rowData"
                      :saveLoading="saveLoading"
                      v-if="isType !== 'set'"
                      @onSubmit="onSubmit"
                      @handleCancel="dialogRegister = false"></add-register>

        <set-alarm v-if="isType === 'set'"
                   :setData="setData"
                   @onSubmit="setOnSubmit"
                   @handleCancel="dialogRegister = false"
                   :saveLoading="setSaveLoading"
        ></set-alarm>

      </div>
    </el-dialog>

    <el-drawer
      :title="setDrawer.title"
      :size="setDrawer.size"
      :direction="setDrawer.direction"
      :visible.sync="drawer"
      :destroy-on-close="true"
    >
      <alarm-record></alarm-record>
    </el-drawer>

  </div>
</template>

<script>

import Search from '../../../../components/search/search'
import AddRegister from './components/addTHRegister'
import {
  getSet,
  getTemperature,
  requestAdd,
  requestDel,
  requestDownload,
  requestSet
} from '../../../../api/house/temperature'
import AlarmRecord from './components/alarmRecord'
import SetAlarm from './components/setAlarm'
import { getArchivesDicId } from '../../../../api/dictionary/dictionary'

export default {
  name: 'index',
  components: {
    SetAlarm,
    AlarmRecord,
    AddRegister,
    Search
  },
  // 温湿度管理
  data () {
    return {
      tableLoading: false,
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 0
      },
      tableData: [],
      params: [], // 筛选条件
      rowData: {}, // 编辑数据
      saveLoading: false,
      setSaveLoading: false,
      searchList: [], // 筛选下拉框数据
      select: '', // 筛选
      searchData: {
        val: ''
      },
      dialogTitle: '登记',
      isType: 'add',
      dialogRegister: false,
      downloadLoading: false,
      drawer: false,
      setDrawer: {
        title: '',
        size: '50%',
        direction: 'rtl'
      },
      setData: {}
    }
  },
  mounted () {
    this.getDic()
    this.getList()
  },
  methods: {
    getDic () {
      getArchivesDicId('administration_tah').then(res => {
        this.searchList = res.data.data
        this.select = this.searchList[0].dictValue
      })
    },
    getList () {
      this.tableLoading = true
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize
      }
      if (this.params.length > 0) {
        param.params = this.params
      }

      getTemperature(param).then(res => {
        this.tableData = res.data.data.list
        this.page.total = res.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleDownload () {
      // 报表下载
      this.downloadLoading = true
      requestDownload().then(res => {
        // this.$message.success('销毁清册操作成功！')
        this.download(res.data)
        this.downloadLoading = false
      }).catch(() => {
        this.downloadLoading = false
      })
    },
    download (data) {
      const blob = new Blob([data])
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.target = '_blank'
      downloadElement.download = '温湿度报表.xls' // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href) // 释放掉blob对象
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page.pageNo = val
      this.getList()
    },
    onSearch () {
      // 搜索
      this.params = []

      if (this.searchData.val) {
        this.params = [{
          name: this.select,
          op: 'like',
          value: this.searchData.val
        }]
      }

      this.getList()
    },
    handleDrawer () {
      this.setDrawer.title = '报警记录'
      this.setDrawer.size = '60%'
      this.setDrawer.direction = 'rtl'
      this.drawer = true
    },
    handleAddEdit (type, rowData) {
      // 登记、编辑
      this.dialogRegister = true
      this.dialogTitle = type === 'add' ? '登记' : '编辑'
      this.isType = type
      this.rowData = rowData || {}
    },
    handleSet () {
      // 设置
      getSet().then(res => {
        this.setData = res.data.data
      })
      this.isType = 'set'
      this.dialogRegister = true
      this.dialogTitle = '设置'
    },
    setOnSubmit (val) {
      this.setSaveLoading = true
      requestSet(val).then(res => {
        this.$message({
          type: 'success',
          message: '设置成功!'
        })
        this.setSaveLoading = false
        this.dialogRegister = false
        this.getList()
      }).catch(() => {
        this.setSaveLoading = false
      })
    },
    onSubmit (val) {
      // 提交登记、编辑
      this.saveLoading = true
      requestAdd(val).then(res => {
        this.$message({
          type: 'success',
          message: '登记成功!'
        })
        this.saveLoading = false
        this.dialogRegister = false
        this.getList()
      }).catch(() => {
        this.saveLoading = false
      })
    },
    handleDel (row) {
      // 删除
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requestDel([row.id]).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
